<template>
  <div class="search">
    <!-- 搜索酒店 -->
    <hotelhead v-if="$route.path !== '/hotel'"></hotelhead>
    <!-- 选择入住的时间和人数 -->
    <div>
      <!-- 引入搜索框  -->
      <inputsearch></inputsearch>
      <p class="address">
        <span>区域：</span>
        <el-button class="all" type="primary">全部</el-button>
        <el-link type="primary">小镇中心</el-link>
        <el-link type="primary">其他</el-link>
      </p>
      <div class="gonglue" v-if="$route.path !== '/detailHotel/'">
        <p>攻略：</p>
        <div>
          <p>罗腾堡依陶伯河而建，是“浪漫之路”和“城堡之路”的交汇点。</p>
          <p>罗腾堡依陶伯河而建，是“浪漫之路”和“城堡之路”的交汇点。</p>
          <p>
            海德“堡”坐落在内卡河畔的王座山上，是一座红褐色古堡，为古代帝宫的遗址。
          </p>
        </div>
      </div>
      <p class="gonglue">
        <span>
          均价
          <sup>？</sup>：
        </span>
        <el-rate
          v-model="value3"
          disabled
          show-score
          text-color="#ff9900"
          score-template="{value}"
        ></el-rate>
        <span class="price">&yen;783</span>
        <el-rate
          v-model="value5"
          disabled
          show-score
          text-color="#ff9900"
          score-template="{value}"
        ></el-rate>
        <span class="price">&yen;1095</span>
      </p>
    </div>
    <!-- 地图 -->
    <div class="dt">
      <across></across>
    </div>
  </div>
</template>

<script>
import across from "./across.vue";
import hotelhead from "./hotelhead.vue";
import inputsearch from "./searchinput.vue";

export default {
  name: "searchhotel",

  data() {
    return {
      showsTit: false,
      querySearch: "",
      value3: 3,
      value5: 5,
      TextTitle: "", //传递的参数
    };
  },

  mounted() {
    // console.log(this.$route.path);
    this.TextTitle = this.$route.params.title;
    this.search = this.$route.params.title;
    // console.log(this.TextTitle);
  },
  components: {
    across,
    hotelhead,
    inputsearch,
  },
  created() {},
  methods: {
    handleSelect(item) {
      // console.log(item);
    },
    handleIconClick(ev) {
      // console.log(ev);
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  position: relative;
  height: 320px;
  margin-bottom: 30px;
  font-size: 14px;

  .address {
    padding: 20px 0;
    .all {
      padding: 3px;
    }
  }
  .gonglue {
    padding: 10px 0;
    display: flex;
    .price {
      padding: 0 20px;
    }
  }
  .dt {
    width: 550px;
    height: 270px;
    position: absolute;
    bottom: -20px;
    right: 10px;
  }
}
.title5 {
  padding: 10px 20px;
}
</style>